<script lang="ts">
export default {
  name: 'appcontrol'
};
</script>

<script setup lang="ts">

import {
  sendAppControl
} from '@/api/appcontrol';
import { getScreenList } from "@/api/screen"
import {
  closeLibraryOneClick,
  eggControlStatusUpdate,
  openLibraryOneClick,
  updateVoiceStatus,
  eggControlStatusFind,
  voiceStatusFind
} from "@/api/server"
import SpaceTime from './components/spaceTime.vue';
import Mind from './components/mind.vue';
import Pattern from './components/pattern.vue';
import Future from './components/future.vue';
import Control from './components/control/index.vue';
import Wander from './components/wanderArea.vue';
const ScreenList = ref([]);
let formData = {
  appId: -1,
  appSourceType: '',
  sourceId: "1",
  action: '',
  terminalType: "7",
  instructParams: {
    id: '',
    cmd: ''
  }
}
//一键开馆
function openLibrary() {
  openLibraryOneClick({}).then((res: any) => {
    try {
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}
//一键闭馆
function closeLibrary() {
  closeLibraryOneClick({}).then((res: any) => {
    try {
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}
//语音开关
function voiceSwitch() {
  // voiceStatus == '1' ? voiceStatus = '-1'  : voiceStatus = '1';
  updateVoiceStatus({
    status: voiceStatus.value
  }).then((res: any) => {
    try {
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}
//脑电波开关    
function eggSwitch() {
  // eggStatus == "1" ? eggStatus = '-1' : eggStatus = '1';
  eggControlStatusUpdate({
    status: eggStatus.value
  }).then((res: any) => {
    try {
      ElMessage.success(res.data.message);
    } catch (error) {
      ElMessage.error("调用失败！");
    }
  })
}
let eggStatus = ref('-1');
let voiceStatus = ref('-1');
/**
 * 查询
 */
function handleQuery() {
  getScreenList({})
    .then((res: any) => {
      let data = res.data.data;
      console.log(data);
      ScreenList.value = data;
    })
  eggControlStatusFind({}).then((res: any) => {
    eggStatus.value = res.data.status;
  })
  voiceStatusFind({}).then((res: any) => {
    voiceStatus.value = res.data.status;
  })
}


//切换页面
function tabClick(tab: any) {
  console.log(tab);
  formData.sourceId = "1";
  formData.appId = -1;
}

onMounted(async () => {

  handleQuery(); // 初始化数据
});




</script>

<template>
  <div class="app-container">

    <div class="contant-box">
      <el-tabs tab-position="left" @tab-click="tabClick">
        <el-tab-pane label="首页">
          <div class="mb5" >
            <el-button class="big-button" @click="openLibrary">一键开馆</el-button>
            <el-button class="big-button" @click="closeLibrary">一键闭馆</el-button>
            <div class="mb-4" style="padding-top: 40px;margin-left:20px;">
              <el-switch v-model="voiceStatus" :inactive-value="'-1'" :active-value="'1'" 
              active-text="语音功能"
              style='zoom:2;'
            @click="voiceSwitch()" />
            <el-switch v-model="eggStatus" :inactive-value="'-1'" :active-value="'1'" 
            @click="eggSwitch()" 
            style='zoom:2;margin-left: 20px;'
            active-text="脑电功能"
            />
        
          </div>
          </div>
        </el-tab-pane>

        <!-- 时空越界 -->
        <el-tab-pane label="时空越界">
          <SpaceTime></SpaceTime>
        </el-tab-pane>
        <!-- 意念索引 -->
        <el-tab-pane label="意念索引">
          <Mind></Mind>
        </el-tab-pane>
        <!-- 大脑模型 -->
        <el-tab-pane label="大脑模型">
          <Pattern></Pattern>
        </el-tab-pane>
        <!-- 未来指南 -->
        <el-tab-pane label="未来指南">
          <Future></Future>
        </el-tab-pane>
        <!-- 意识控制 -->
        <el-tab-pane label="意识控制">
          <Control></Control>
        </el-tab-pane>
        <!-- 漫游元境 -->
        <el-tab-pane label="漫游元境">
          <Wander></Wander>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>
</template>
<style lang="scss" scoped>
.app-container {
  .contant-box {
    background-color: #fff;
    padding: 20px;
  }

  .el-row {
    background-color: #fff;
  }

  .small-title {
    font-size: 18px;
    color: #000;
    line-height: 32px;
    display: inline-block;
    height: 32px;
    margin-top: -2px;
    position: relative;
    top: -2px;
    font-weight: 600;
    width: 160px;
  }

  .mb-4 {
    .data-box {
      background: white;
      height: 130px;
      display: flex;
      justify-content: space-between;
      padding: 20px;

      .data-box-info {
        .data-box-info-value {
          text-align: center;
        }

        .data-box-info-name {
          text-align: center;
        }

        .data-box-info-title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 10px;
        }
      }
    }
  }
}

.active {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}

.ctn-box {
  padding: 20px;
}

.botton-box {
  margin: 20px 0;
}

.sample-box {
  padding-left: 40px
}

.title-botton {
  min-width: 100px;
  height: 36px;
  line-height: 36px;
}

.big-button {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  padding: 40px;
  font-size: 32px;
  color: #000;
  font-weight: 600;
  margin-left: 30px;
}

.mb5 {
  padding: 50px 80px;
}

// /deep/.el-tabs__item {
// 	/* 修改为您想要的文字大小 */
//     font-size: 20px!important;
// }
// .el-tabs__item{
//   font-size: 20px !important;
//   font-weight: bold;
// }
</style>
<style>
/deep/.el-tabs__item {
  /* 修改为您想要的文字大小 */
  font-size: 20px !important;
}
</style>